<template>
	<view>
		<view style="margin: 20rpx 0;">
			<view style="margin: 20rpx 0;"class="u-flex">
				<u-avatar :src="$url+item.avatar"></u-avatar>
				<view style="margin-left: 20rpx;">
					<view>{{item.userName}}</view>
					<view style="color: #B2B2B4;">{{item.commentTime | formatDate}}</view>
				</view>
			</view>
			<view style="line-height: 50rpx;letter-spacing: 2rpx;white-space: pre-wrap;">
				{{item.content}}
			</view>
			<view style="justify-content: space-evenly;margin-top: 30rpx;" class="u-flex">
				<view @click="likesClick(item.id)">
					<u-icon name="heart" v-if="show == 0"></u-icon>
					<u-icon name="heart-fill" color="red" v-else></u-icon>
					<text style="margin-left:10rpx;">{{item.likes}}</text>
				</view>
				<view @click="collectClick(item.id)">
					<u-icon name="star"></u-icon>
					<text style="margin-left:10rpx;">{{item.collect}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:["item"],
		name:"comment",
		data() {
			return {
				show:0,
				commentId:this.item.id,
				likesItem:{},
				likes:this.item.likes,
				commentItem:this.item
			};
		},
		methods:{
			likesClick(e){
				if(this.show == 0){
					this.likesPost().then((res)=>{
						this.CommentPut().then(res=>{
							this.getLikes()
						})
					})
				}else{
					this.likesDelete().then((res)=>{
						this.CommentPut().then(res=>{
							this.getLikes()
						})
					})
				}
				
			},
			collectClick(e){
				console.log(e)
				
			},
			async CommentPut(){
				let likes = 0
				if(this.show == 0){
					likes = ++this.likes
				}else{
					likes = --this.likes
				}
				console.log(likes)
				console.log(this.commentItem)
				this.commentItem.likes = likes
				const res=await this.$myRequst({
					url:"/comment/put",
					method:"PUT",
					data:this.commentItem
				})
			},
			async likesPost(){
				const res=await this.$myRequst({
					url:"/likes/post",
					method:"POST",
					data:{
						commentId:this.commentId,
						userId:uni.getStorageSync("userId"),
						likesTime:Date.now()
					}
				})
				
			},
			async likesDelete(){
				const res=await this.$myRequst({
					url:"/likes/delete/"+this.likesItem.likesId,
					method:"DELETE"
				})
			},
			//
			async getLikes(){
				const res=await this.$myRequst({
					url:"/likes/get/userId?userId="+uni.getStorageSync("userId") +"&commentId="+this.commentId
				})
				this.likesItem = res.data.data
				if(res.data.data ==  null){
					this.show = 0
				}else{
					this.show = 1
				}
				console.log(this.show)
				console.log(this.likesItem)
				
			}
		},
		mounted() {
			console.log("111")
			this.getLikes()
		},
		activated() {
			console.log("7777")
		},
		// beforeUpdate(){
		// 	console.log("88888")
		// },
		// updated(){
		// 	console.log("9999")
		// },
		filters: {
		  numFilter (value) {
		    // 截取当前数据到小数点后两位
		    let realVal = parseFloat(value).toFixed(2)
		    return realVal
		  },
		  formatDate(value) {
		  	if(value == undefined){
		  		return;
		  	}
		  	// let date = new Date(value * 1000);
		  	let date = new Date(value);
		  	//时间戳为10位需*1000，时间戳为13位的话不需乘1000
		  	let y = date.getFullYear();
		  	let MM = date.getMonth() + 1;
		  	MM = MM < 10 ? ('0' + MM) : MM; //月补0
		  	let d = date.getDate();
		  	d = d < 10 ? ('0' + d) : d; //天补0
		  	let h = date.getHours();
		  	h = h < 10 ? ('0' + h) : h; //小时补0
		  	let m = date.getMinutes();
		  	m = m < 10 ? ('0' + m) : m; //分钟补0
		  	let s = date.getSeconds();
		  	s = s < 10 ? ('0' + s) : s; //秒补0
		  	// return y + '-' + MM + '-' + d; //年月日
		  	return y + '-' + MM + '-' + d + ' ' + h + ':' + m+ ':' + s; //年月日时分秒
		  }
		}
	}
</script>

<style>

</style>
